<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>会员添加</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" href="/plugins/layui/css/layui.css" media="all" />
	<style>
		.add-item{
			text-align: center;
			float:right;
			padding-right: 40px;
		}
		.add-car{
			cursor: pointer;
			float:right;
			border:1px solid #ccc;
			border-radius:5px;
			display: inline-block;
			width: 120px;
			margin: 0 20px;
			line-height: 30px;
			text-align: center;
		}
		.car-info{
			float:left;
			width:150px;
			padding:20px 40px 10px 40px;
		}
		.car-info-list{
			padding:0 40px;
			width:120px;
			float:left;
			line-height: 30px;
			/*font-size:14px;*/
		}
		.layui-form-inline{
			height:100px;
			margin-top:10px;
			padding-top:10px;
			border: solid 1px darkgray;
			text-align: center
		}
		.selectModel{
			float:left;
			margin-left:-20px;
			height:38px;
		}
		.cacel{
			width:100%;
			margin: 10px 0;
			cursor: pointer;
			float:left;
		}
		.cacel>span{
			border:1px solid #ccc;
			display:inline-block;
			width:90px;
			height:30px;
			line-height: 30px;
			border-radius:5px;
		}
		.submit{
			margin:30px 0 0 220px;
			width:120px;
			height:40px;
		}
		.reset{
			margin:30px 0 0 80px;
			width:120px;
			height:40px;
		}
		.layui-table-box, .layui-table-view{
			min-height: auto;
		}
	</style>
</head>
<body class="childrenBody">
<form class="layui-form" style="padding-top: 20px;">
	<h3 style="padding:20px 40px 10px 40px;">个人信息</h3>
	<div class="layui-form-item">
		<label class="layui-form-label">客户姓名</label>
		<div class="layui-input-block" style="width: 20%">
			<input type="text" class="layui-input"  name="name" lay-verify="required" placeholder="请输入客户姓名">
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label">手机号码</label>
		<div class="layui-input-block"  style="width: 20%">
			<input type="text" class="layui-input" lay-verify="required||phone" name="phone" placeholder="请输入手机号码">
		</div>
	</div>
	<br>
	<div class="layui-form customer_car_list">
		<h3 class="car-info-list">车辆信息</h3>
		<span onclick="addCarInfo()" class="add-car" style="width:80px;float:right;height:30px;margin-bottom:20px;">添加车辆</span><br>
		<table class="layui-table" id="customerCarList" lay-filter="customerCarList"></table>
	</div>

	<div class="layui-form-item">
		<div class="layui-input-block" style="margin-left:0;">
			<button class="layui-btn submit" lay-submit="" lay-filter="addCustomer" style="margin: 30px 0 0 20px;">立即提交</button>
			<button type="reset" class="layui-btn layui-btn-primary reset">重置</button>
		</div>
	</div>
</form>
<div class="item-info">
	<div class="item-content">
		<ul>
			<li>
				<p>车牌号码</p>
				<input type="text" value="" class="carnumber" name="plateNumber" placeholder="请输入车牌号码" id="carnumber">
			</li>
			<li>
				<p>选择型号</p>
				<!--<input type="text" class="layui-input" lay-verify="required" name="model" placeholder="请输入车型" id="model">
				<input type="button" class="layui-btn layui-btn-xs selectModel" value="选择型号" data-id="'+modalNum+'"/>-->
				<select name="brand" id="brand" class="carnumber"></select>

			</li>
			<li>
				<p>车架号</p>
				<input type="text" value="" class="carnumber" name="frameNumber" placeholder="请输入车架号" id="framenumber">
			</li>
			<li>
				<div class="return" onclick="returnBack()">返回</div>
				<div class="save">保存</div>
			</li>
		</ul>
	</div>
</div>
<script type="text/javascript" src="/js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="/plugins/layui/layui.js"></script>
<link rel="stylesheet" href="/plugins/layui/css/membersEdit.css">
<script type="text/html" id="barDemo">
	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon"></i>删除</a>
</script>
<script type="text/javascript">
    var	index=0;
    var modalNum=0;
    var tableData=[];

    function setData(result,modalNum){
        $("#model"+modalNum).val(result);
    }

	function returnBack(){
        $(".item-info").css("display","none");
	}

    function addCarInfo(){
        var CarInfo = $(".item-info")[0];
        CarInfo.style.display = "block";
        $("#carnumber").val("");
        $("#model").val("");
        $("#framenumber").val("");
    }

    function getcar() {
        var array = new Array();
        $("div[name=car]").each(function () {
            var plateNumber=$(this).find("input[name='plateNumber']").val();
            var carInfo=$(this).find("input[name='model']").val();
            var temp = { plateNumber: "", carDesc:""};
            temp.plateNumber = plateNumber;
            temp.carInfo = carInfo;
            array.push(temp);
        });
        return array;
    }


    function getcustomer() {
        var customer = new Object();
        customer.name = $.trim($("input[name='name']").val());
        customer.phone = $.trim($("input[name='phone']").val());
        customer.storeMemberCars = getcar();
        var json = JSON.stringify(customer);
        return json;
    }

    function setData(result){
        $("#model").val(result);
    }

    function init(){
        $("body").on('click',".selectModel",function(){
            var modalNums=$(this).attr("data-id");
            layer.open({
                type: 2,
                skin: 'layui-layer-rim', //加上边框
                area: ['850px', '500px'], //宽高
                content: '/car/select_car.html?modalNum='+modalNums
            });
        })

        var emptyDataHtml='<div style="border: solid darkgray 1px;height:100px;text-align:center;line-height:100px;" id="emptyData">还没有车辆信息哦，请添加车辆 (∧_∧)</div>';
        $("body").on('click',".cacel",function(){
            modalNum--;
            $(this).parent().parent().parent().parent().remove();
            if($(".car").length==0){
                $("#carInfoList").append(emptyDataHtml);
            }
        })



    }


    layui.config({
        base : "js/"
    }).use(['form','layer','jquery','table'],function(){

        var form = layui.form,
            layer = parent.layer === undefined ? layui.layer : parent.layer,
            $ = layui.jquery,
            table=layui.table;
        init();
         var tableIns=table.render({
             elem: '#customerCarList'
             ,data: tableData
             ,cols: [[
                 {checkbox: true, fixed: true}
                 ,{field:'plateNumber', title: '车牌号',width:"20%"}
                 ,{field:'carInfo', title: '车辆信息',width:"20%"}
                 ,{field:'frameNumber', title: '车架号',width:"20%"}
                 ,{fixed: 'right',title: '操作', align:'center', toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器
             ]]
             ,page: false
         });

        $.ajax({
            type : "GET",
            url: '/carBrands/GetAllBrands',
            dataType:'json',
            async:false,
            success: function(data){
                var list=data.data;
                var html='';
                for(var i=0;i<list.length;i++){
                    html += "<option value='"+list[i].id+"'>"+list[i].name+"</option>"
                }
                $("#brand").append(html);
                form.render();
            }
        });

        /**
         * 删除某一行
         * **/
        table.on('tool(customerCarList)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象
            console.log(tr.selector);
            if(layEvent === 'detail'){ //查看
                //do somehing
            } else if(layEvent === 'del'){ //删除
                layer.confirm('真的删除行么', function(index){
                    let str = tr.selector.split('"');
                    tableData.splice(parseInt(str[1]),1);
                    table.reload('customerCarList',{
                        data : tableData
                    });
                    layer.close(index);
                    //向服务端发送删除指令
                });
            } else if(layEvent === 'edit'){ //编辑
                //do something

                //同步更新缓存对应的值
                obj.update({
                    username: '123'
                    ,title: 'xxx'
                });
            }
        });
        //创建一个编辑器
        form.on("submit(addCustomer)",function(data){
//            var data=getcustomer();
			var data ={};
            data.name = $.trim($("input[name='name']").val());
            data.phone = $.trim($("input[name='phone']").val());
            data.storeMemberCars=tableData;
            console.log(data);
            var index = top.layer.msg('数据提交中，请稍候',{icon: 16,time:false,shade:0.8});
            $.ajax({
                type: "POST",
                url:"/storeMember",
                data:JSON.stringify(data),// 序列化表单值
                contentType:"application/json",
                success: function(res) {
                    if(res.code==2000){
                        top.layer.close(index);
                        top.layer.msg("添加成功！");
                        layer.closeAll("iframe");
                        //刷新父页面
                        parent.location.reload();
                    }else{
                        top.layer.close(index);
                        top.layer.msg(res.msg);
					}
                } ,
                error: function(request) {
                    alert("请求错误");
                }
            });
            return false;
        })



        $(".save").click(function(){
            if($("#carnumber").val() !="" ||$("#model").val()!="" ){
                tableData.push({plateNumber:$("#carnumber").val(),carInfo:$("#brand").find("option:selected").text(),frameNumber:$("#framenumber").val()})
            }
            var CarInfo = $(".item-info")[0];
            CarInfo.style.display = "none";
            table.reload('customerCarList',{
                data : tableData
            });
        })
    })
</script>
</body>
</html>

